<template>
	<view>
		
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="5">
			<view class="" style="width: 85vw;padding:40rpx 30rpx;">
				<view class="" style="font-weight: bold;  font-size: 18px; text-align: center;color:rgba(16, 16, 16, 1);">
					温馨提示
				</view>
				<view class="" style="line-height:48rpx;text-indent: 2em; font-size: 32rpx; text-align: center;margin-top: 20rpx;">
					亲爱的家人，在发布动态、发布评论前麻烦您先
					上传一下您的头像和昵称，好的头像和昵称
					可以获得更多粉丝和关注哦~
				</view>
				<view class="u-flex-xy-center" style="margin-top: 50rpx;">
					<label for="chooseAvatar" class="" style="position: relative;">
						<image :src="userInfo&&userInfo.uphoto? userInfo.uphoto :'/static/circle/icon-avatar.png'" mode="" style="width: 140rpx;height: 140rpx;border-radius: 70rpx;"></image>
						<image class="edit-photo" src="/static/circle//icon-edit.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</label>
				</view>
				<view class="" style="margin-top: 20rpx;">
					<u--input
						type="nickname"
					    placeholder="请输入昵称"
					    border="bottom"
					    clearable
						 @change="nick_nameChange"  v-model="userInfo.usename"
					  ></u--input>
				</view>
				<!-- <view class="" style="text-align: right;color: #c0c4cc;padding: 5px;">0/6</view> -->
				<view style="margin-top: 40rpx;">
					<button class="cu-btn round lg circle-btn" :disabled="!userInfo.usename || !userInfo.uphoto" style="color: #fff;background-color: #dd275d;width: 100%;height: 42px;font-size: 20px;" @click="apipostUpdateuserinfo">完成</button>
				</view>
				<view class="" @click="close" style="margin-top: 20rpx;text-align: center;font-size: 30rpx;">
					以后再说
				</view>
				<!-- button更好头像 -->
			</view>
			<button open-type="chooseAvatar" v-show="false" id="chooseAvatar" @chooseavatar="uploadAva"></button>
		</u-popup>
		
	</view>
</template>

<script>
import upload from "@/plugins/upload.js"
import tui from '@/pagesCircle/libs/tui.js'
export default{
	props:{
		show:{
			type:Boolean,
			default:true,
		}
	},
	data(){
		return {
			disabledButton:false,
			userInfo:{
				usename:'',
				uphoto:'',
			},
			res:'',
		}
	},
	mounted() {
		
		//获取用户信息
		this.apipostUsernicknameandavatar()
	},
	methods:{
		uploadAva(e) {
		      let _this = this;
			  console.log(e.detail.avatarUrl)
			
				tui.uploadFilePromise(e.detail.avatarUrl).then((r)=>{
						r.host = "https://" + r.host + "/";
						r.src = r.host + r.url
						_this.res = r
						_this.userInfo.uphoto = r.src
				}).catch(err=>{
					uni.$u.toast("上传失败")
				})
				
		      // wx.getImageInfo({
		      //   src: e.detail.avatarUrl,
		      //   success(res) {
		      //     console.log('getImageInfo', res)
		      //     _this.userInfo.uphoto = res.path;
		      //   }
		      // })
		},
		 nick_nameChange(e) {
		      //this.userInfo.usename = e.detail.value
		},
		open(){
			
		},
		close(){
			this.$emit("close")
		},
		apipostUsernicknameandavatar(){
			this.$circleApi.postUsernicknameandavatar().then(res=>{
							 this.userInfo = res
			}).catch(err=>{
							 
			})
		},
		//修改
		apipostUpdateuserinfo(){
			let uphoto = this.userInfo.uphoto.split("images")
			let file = ""
			if(uphoto[1]){
				file = "images" +uphoto[1];
			}
			let param = {
				custom_avatar: file,
				file_id:this.res? this.res.id:0,
				usename: this.userInfo.usename,
			}
			this.$circleApi.postUpdateuserinfo(param).then(res=>{
				console.log(param,'修改成功')
				uni.$u.toast("修改成功")
				this.close();
			}).catch(err=>{
							 
			})
		},
	}
}
</script>

<style lang="scss">
	.edit-photo{
		position: absolute;
		right:0;
		bottom: 0px;
	}
	
	.cu-btn[disabled]{
		opacity: 0.3;
	}
	
	.circle-btn{
		height: 84rpx;
		
	}
</style>